<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <div class="formtopcard">
                <div class="editcontent videform" v-for="(item, index) in obj.videoList" :key="item.url">
                    <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                        <el-upload :action="uploadUrl" :before-upload="uploadBefore" :on-success="uploadVideoHandleChange"
                            :data="{ CustomerId: $store.getters.firmId }" :show-file-list="false" accept=".mp4">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select v-model="item.url">
                        <option value>请选择视频</option>
                        <option v-for="(imgitem, index) in videoListArr" :value="imgitem.url" :key="index">
                            {{ imgitem.name }}
                        </option>
                    </select>
                    <i class="el-icon-error" @click="deleteDataYinfo(obj.videoList, index)" v-if="index > 0"></i>
                </div>
                <div class="addybtn" @click="addDataYinfo(obj.videoList)">+ 新增视频</div>
                <div class="videtypeitem">
                    <el-checkbox v-model="obj.videoPlayType" :label="1">自动播放</el-checkbox>
                    <el-checkbox v-model="obj.videoPlayType" :label="2">循环播放</el-checkbox>
                </div>
                <div class="videtypeitem">
                    <el-radio v-model="obj.videoPlayGroup" :label="1">顺序播放</el-radio>
                    <el-radio v-model="obj.videoPlayGroup" :label="2">随机播放</el-radio>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
// import { query, create } from "@/api/resource";

export default {
    name: "VideoPlayForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
        addDataYinfo: Function,
        getVideoList: Function,
        deleteDataYinfo: Function,
        videoListArr: Array,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            uploadUrl: process.env.VUE_APP_UPLOAD_NEWAPI,
            uploadDataform: {},
        }
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    methods: {
        uploadBefore(file) {
            if (file.size > 1000 * 1000 * 100) {
                this.$message.error("上传视频不能大于100M");
                return false;
            }
        },
        uploadVideoHandleChange(res, file, fileList) {
            if (res.code == 0) {
                this.uploadDataform.id = "";
                this.uploadDataform.name = file.name;
                this.uploadDataform.type = 1;
                this.uploadDataform.url = res.data;

                this.createVideoData();
            } else {
                this.$message.error(res.message);
            }
        },
        createVideoData() {
            const tempDataForm = Object.assign({}, this.uploadDataform);
            create(tempDataForm).then((res) => {
                if (res.data.code == 0) {
                    this.notifyMessage();
                    this.$emit("getVideoList");
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(() => { });
        },
    }
}
</script>